<template>
  <div id='informDetails'>
    <div class="card-container">
      <el-row :gutter="20">
        <el-form ref="form" style="max-height: 600px;overflow-y: auto;" :model="form" label-width="80px">
          <!-- <el-form-item label="资料编码" prop="dataCode">
          <el-input v-model="form.dataCode" placeholder="请输入资料编码" />
        </el-form-item> -->
          <el-col :span="24" :offset="0">
            <el-form-item label="资料描述" prop="dataDesc">
              <span>{{ form.dataDesc }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24" :offset="0">
            <el-form-item label="所属项目" prop="projectId">
              <span>{{ formatProject(form.projectId) }}</span>
            </el-form-item>
          </el-col>
          <div v-if="form.type == '1'">
            <el-col :span="24" :offset="0">
              <el-form-item label="视频" prop="">
                <span>{{ form.videoSourceName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="24" :offset="0">
              <el-form-item label="" prop="">
                <!-- <el-image :style="`width: ${108 * 2}px; height: ${80 * 2}px;margin: 0 10px;`" :src="videoUrl"
                :fit="'fill'"></el-image> -->
                <video :src="'data:video/mp4;base64,' + fileurl" controls
                  :style="`width: ${108 * 4}px; height: ${80 * 3}px;margin: 0 10px;`"></video>
              </el-form-item>
            </el-col>
          </div>
          <div v-if="form.type == '5'">
            <el-col :span="24" :offset="0">
              <el-form-item label="音频" prop="">
                <span>{{ form.warningAudioSourceName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="24" :offset="0">
              <el-form-item label="" prop="">
                <!-- <el-image :style="`width: ${108 * 2}px; height: ${80 * 2}px;margin: 0 10px;`" :src="videoUrl"
                :fit="'fill'"></el-image> -->
                <audio :src="'data:video/mp4;base64,' + fileurl" controls></audio>
              </el-form-item>
            </el-col>
          </div>

          <div v-if="form.type == '2'">
            <el-col :span="24" :offset="0">
              <el-form-item label="图片" style="position: relative;">
                <span>{{ form.pictureSourceName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="form.pictureHdfsName" :offset="0">
              <el-form-item label="" style="position: relative;">
                <el-image :style="`width: ${100 * 2}px; height: ${100 * 2}px;margin: 0 10px;`"
                  :src="'data:image/png;base64,' + fileurl" :fit="'fill'"></el-image>
              </el-form-item>
            </el-col>
          </div>
          <div v-if="form.type == '3'">
            <el-col :span="20" :offset="0">
              <el-form-item label="通知" prop="">
                <span>{{ form.noticeSourceName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="4" :offset="0">
              <el-form-item label-width="0px">
                <span style="margin-left:20px;">{{ form.noticeDisplayDuration || 0 }}分钟</span>
              </el-form-item>
            </el-col>

            <el-col v-if="form.noticeHdfsName" :span="24" :offset="0">
              <el-form-item label="" style="position: relative;">
                <el-image :style="`width: ${108 * 2}px; height: ${80 * 2}px;margin: 0 10px;`"
                  :src="'data:image/png;base64,' + fileurl" :fit="'fill'"></el-image>
              </el-form-item>
            </el-col>
          </div>
          <div v-if="form.type == '4'">
            <el-col :span="20" :offset="0">
              <el-form-item label="滚动消息" class="label" prop="">
                <span>{{ form.scrollMessage }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="4" :offset="0">
              <el-form-item label-width="0px">
                <span>{{ form.scrollMessageDisplayDuration || 0 }}分钟</span>
              </el-form-item>
            </el-col>
          </div>
        </el-form>
      </el-row>
    </div>

  </div>
</template>

<script>
import video from "@/assets/images/video1.png"
import { getProject } from "@/api/runningLog/runningLog.js";
import { idataManage } from '@/api/dm/dm';
export default {
  name: 'formDetails',
  components: {},
  props: {
    form: {
      type: Object,
      default: () => {
        return {};
      },
    },
    projectList: {
      type: Array,
      default: () => {
        return [];
      },
    }
  },
  data() {
    return {
      fileurl: '',
      url: `${process.env.VUE_APP_IMAGE_URL}/api/file/down?fileUrl=`,
      videoUrl: video
    };
  },
  computed: {},
  created() {
    console.log(this.form, 'form')
    this.searchFile()
    // getProject().then(res => {
    //   if (res.code == 200) {
    //     this.projectList = res.data;
    //   }
    // });


    // if (process.client){}
  },
  mounted() {
    console.log(this.form);
  },
  beforeCreate() { },
  beforeMount() { },
  methods: {
    formatProject(val) {
      let _arr = this.projectList.filter(item => {
        return item.projectId == val
      })
      console.log(val, _arr, this.projectList, '_arr')
      return _arr[0].shortName
    },
    async searchFile() {
      const res = await idataManage(this.form)
      console.log(res, 'res')
      this.fileurl = res
      // var blob = new Blob([res], { type: 'video/mp4' });
      // // const blob = new Blob([data], { type: "image/jpeg" }); //类型一定要写！！！
      // const reader = new FileReader();
      // reader.readAsDataURL(blob);
      // reader.onload = () => {
      //   this.fileurl = reader.result
      //   console.log(reader.result, 'reader.result')
      //   // this.file.url = reader.result;
      // };
      // reader.onload = () => resolve(reader.result);
      // reader.onerror = (error) => reject(error);

      // let reader = new FileReader(); //实例化文件读取对象

      // reader.readAsDataURL(res); //将文件读取为 DataURL,也就是base64编码

      // reader.onload = (e) => { //文件读取成功完成时触发

      //   let dataURL = e.target.result; //获得文件读取成功后的DataURL,也就是base64编码

      //   console.log(dataURL);

      // }
    },

  },
};
</script>
<style lang='scss' scoped>
#informDetails {
  width: 100%;
  height: 100%;

  span {
    color: rgba(255, 255, 255, .6);
  }
}
</style>